<script lang="tsx">
import { defineComponent } from "vue"
import props from "./props.ts"

export default defineComponent({
	name: "ChenCard",
	props,
	setup(props, { slots }) {
		let className = `chen-card`
		return () => (
			<div
				class={className}
				style={{
					width: props.width + "px",
				}}
			>
				<div class="chen-card-img">
					<img src={props.imgSrc}></img>
				</div>
				{props.summary ? (
					<div class="chen-card-summary">{props.summary}</div>
				) : slots.default ? (
					<div class="chen-card-summary">{slots.default()}</div>
				) : (
					"暂无描述..."
				)}
				{/* 用户传入footer插槽 */}
				{slots.foo ? <div class="chen-card-footer">{slots.foo()}</div> : null}
			</div>
		)
	},
})
</script>

<style lang="less" scoped></style>
